﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="map.taobao.WebForm1" %>

<%@ Register Assembly="RuleCode.Common" Namespace="RuleCode.Controls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <link href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .DragStyle
        {
            background-color:#ECECEC;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div  >
        <input type="button" value="OpenDialog" onclick ="openDialog();" />
        <div id="dialog1">
             <input  type ="text" value=""/>
        </div>
       
        测试：<asp:TextBox ID="TextBox1" runat="server">1</asp:TextBox> <br />
        <input  type="button" value="测试赋值" onclick ="document.getElementById('TextBox1').value='444';"/>
        <asp:Button ID="Button1" runat="server" Text="显示" onclick="Button1_Click" />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <a href="javascript:alert(1);">asdfasdfasdfads</a>
        <img id="testImg1" src="/img/close.gif"/>
        <input  accesskey="enter" type="button" onclick ="testImg();" value="测试图片"/>  <br />
        <div style=" background:url(/img/t111.gif) no-repeat 0px 0px;   width:200px; ">我的名字</div><br />
        <textarea    id="testTextArea1"    style=" overflow:hidden;"></textarea>
        <input  type="text" id="testTextArea"/> <br />
        密码：<input  id="passwordInput" type="password" value ="" />
        <br />

    </div>
    
    <div  style=" border:solid 1px lightBlue;margin:2px 2px 2px 2px;" id="DragDiv0">
        <div class ="DragStyle">
            DragHeader0
        </div>
        DragContent0
    </div>
    <div  style=" border:solid 1px lightBlue;margin:2px 2px 2px 2px;" id="DragDiv1">
        <div class ="DragStyle">
            DragHeader1
        </div>
        DragContent2
    </div>
    <div  style=" border:solid 1px lightBlue;margin:2px 2px 2px 2px; cursor :move " id="DragDiv2">
        <div class ="DragStyle">
            DragHeader2
        </div>
        DragContent2
    </div>      
    <div>
    </div>
    <script type="text/javascript">
        function addEventHandler(oTarget, sEventType, fnHandler) {
            if (oTarget.addEventListener) {
                oTarget.addEventListener(sEventType, fnHandler, false);
            } else if (oTarget.attachEvent) {
                oTarget.attachEvent("on" + sEventType, fnHandler);
            } else {
                oTarget["on" + sEventType] = fnHandler;
            }
        };

        function removeEventHandler(oTarget, sEventType, fnHandler) {
            if (oTarget.removeEventListener) {
                oTarget.removeEventListener(sEventType, fnHandler, false);
            } else if (oTarget.detachEvent) {
                oTarget.detachEvent("on" + sEventType, fnHandler);
            } else {
                oTarget["on" + sEventType] = null;
            }
        };

//        function al1() {
//            alert(1);
//        }
//        function al2() {
//            alert(2);
//        }
        //addEventHandler(document.getElementById("passwordInput"), "focus", al1);
        //addEventHandler(document.getElementById("passwordInput"), "focus", al2);

        var passwordInput = document.getElementById("passwordInput");
        var focusFunc = passwordInput.onfocus;
        //passwordInput.onfocus = al1;
        
        function getElementsByClassName(className, parentNode) {
            if (parentNode == null)
                parentNode = document;
            var allEleList = new Array();
            for (var i = 0; i < parentNode.childNodes.length; i++) {
                if (parentNode.childNodes[i].className == className)
                    allEleList.push(parentNode.childNodes[i]);
                var childEleList = getElementsByClassName(className, parentNode.childNodes[i]);
                for (var j = 0; j < childEleList.length; j++)
                    allEleList.push(childEleList[j]);
            }
            return allEleList;
        }

        function initDrag() {
            var allDragHeaders = getElementsByClassName("DragStyle");
            for (var i = 0; i < allDragHeaders.length; i++) {
                allDragHeaders[i].style.cursor = "move";
                allDragHeaders[i].onmousedown = function(event) {
                    var parentNode = this.parentNode;
                    var top = PageCommonUtil.getTop(parentNode);
                    var left = PageCommonUtil.getLeft(parentNode);
                    this.style.cursor = "move";
//                    parentNode.style.position = "absolute";
//                    parentNode.style.left = left + "px";
//                    parentNode.style.top = top + "px";
                    parentNode.className = "move";
                }
                allDragHeaders[i].onmousemove = function(event) {
                    var parentNode = this.parentNode;
                    event = window.event || event;
                    var moveOffsetX = event.offsetX;
                    var moveOffsetY = event.offsetY;
                    if (parentNode.className == "move" && moveOffsetX != 0 && moveOffsetY != 0) {
                        var moveToX = PageCommonUtil.getEventX(event);
                        var moveToY = PageCommonUtil.getEventY(event);
                        parentNode.style.left = parentNode.style.left + moveOffsetX + "px";
                        parentNode.style.top = parentNode.style.top + moveOffsetY + "px";
                        parentNode.style.position = "absolute";
                    }
                }

//                allDragHeaders[i].onmouseup = function(event) {
//                    var parentNode = this.parentNode;
//                    event = window.event || event;
//                    if (parentNode.className == "move") {
//                        var moveToX = PageCommonUtil.getEventX(event);
//                        var moveToY = PageCommonUtil.getEventY(event);
//                        parentNode.style.left = moveToX + "px";
//                        parentNode.style.top = moveToY + "px";
//                        parentNode.className = "";
//                    }
//                }
                allDragHeaders[i].onmouseout = function(event) {
                    var parentNode = this.parentNode;
                    parentNode.className = "";
                }
            }
        }

        initDrag();       
        
        var PageCommonUtil = window.PageCommonUtil || {};
        PageCommonUtil = {
            //获取事件发生的横坐标位置
            getEventX:function(evt) {
                evt = evt || window.event;
                /**
                使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
                */
                var scrollPosX;
                if (typeof window.pageYOffset != 'undefined') {
                    scrollPosX = window.pageXOffset;
                }
                else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                    scrollPosX = document.documentElement.scrollLeft;
                }
                else if (typeof document.body != 'undefined') {
                    scrollPosX = document.body.scrollLeft;
                }        
                return (evt.x || evt.clientX || evt.pageX) + scrollPosX;
            },  
            //获取事件发生的纵坐标位置
            getEventY:function(evt) {
                evt = evt || window.event;
                /**                          
                使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
                */
                var scrollPosY;
                if (typeof window.pageYOffset != 'undefined') {
                    scrollPosY = window.pageYOffset;
                }
                else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                    scrollPosY = document.documentElement.scrollTop;
                }
                else if (typeof document.body != 'undefined') {
                    scrollPosY = document.body.scrollTop;
                }        
                return (evt.y || evt.clientY || evt.pageY) + scrollPosY;
            },  
            //取消事件冒泡     
            clearEventBubble:function(evt) {
                evt = evt || window.event;

                if (evt.stopPropagation) {
                    evt.stopPropagation();
                } else {
                    evt.cancelBubble = true;
                }

                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }

            } ,
            //获取元素的上边沿的绝对位置
            getTop: function(e) {
                var offset = e.offsetTop;
                if (e.offsetParent != null) {
                    if (e.offsetParent.style.position.toLowerCase() == "absolute") {
                        if (SysAgent.firefox)
                            offset += parseInt(e.offsetParent.style.top);
                        return offset;
                    }
                    offset += this.getTop(e.offsetParent);
                }
                return offset;
            },
            //获取元素的左边沿的绝对位置
            getLeft: function(e) {
                var offset = e.offsetLeft;
                if (e.offsetParent != null) {
                    if (e.offsetParent.style.position.toLowerCase() == "absolute") {
                        if (SysAgent.firefox)
                            offset += parseInt(e.offsetParent.style.left);
                        return offset;
                    }
                    offset += this.getLeft(e.offsetParent);
                }
                return offset;
            },
            //判断是否为输入框元素
            isTextInput: function(targetEle) {
                var isTest = true;
                isTest = ((targetEle != null) && isTest);
                isTest = isTest && ((targetEle.tagName.toLowerCase() == "textarea")
                                 || (targetEle.tagName.toLowerCase() == "input"
                                     && ((targetEle.type.toLowerCase() == "text") || (targetEle.type.toLowerCase() == "password"))
                                     )
                                 );
                return isTest;
            },
            //初始化 输入框水印
            InitWaterMarker: function(id, msg, waterClass) {
                var targetEle = document.getElementById(id);
                var isTest = this.isTextInput(targetEle);
                if (isTest) {
                    //判读是否存在水印
                    var waterMakerSpanId = id + "_watermarherspan";
                    var waterMakerSpanEle = document.getElementById(waterMakerSpanId);
                    if (waterMakerSpanEle != null)
                        return;

                    var eleTop = this.getTop(targetEle);
                    var eleLeft = this.getLeft(targetEle);
                    var newSpanEle = document.createElement("span");
                    if (waterClass != null)
                        newSpanEle.className = waterClass;
                    newSpanEle.id = waterMakerSpanId;
                    newSpanEle.style.position = "absolute";
                    newSpanEle.style.top = eleTop + "px";
                    newSpanEle.style.left = eleLeft + "px";
                    newSpanEle.style.color = "Gray";
                    newSpanEle.style.fontSize = "small";
                    newSpanEle.style.marginLeft = "5px";
                    newSpanEle.innerHTML = msg;
                    newSpanEle.onclick = function() {
                        this.style.display = "none";
                        targetEle.focus();
                    }
                    document.body.appendChild(newSpanEle);
                    var eleValue = targetEle.value;
                    newSpanEle.style.display = (eleValue == "") ? "block" : "none";
                    targetEle.onfocus = function() {
                        newSpanEle.style.display = "none";
                    }
                    targetEle.onblur = function() {
                        newSpanEle.style.display = (this.value == "") ? "block" : "none";
                    }
                }
            },
            //初始化水印列表
            InitWaterMarkers: function(ids, msgs, classNames) {
                if ((ids instanceof Array) && (msgs instanceof Array)) {
                    if (ids.length == msgs.length) {
                        for (var i = 0; i < ids.length; i++) {
                            var waterClass = "";
                            if ((classNames != null) || (classNames instanceof Array))
                                waterClass = classNames[i];
                            this.InitWaterMarker(ids[i], msgs[i], waterClass);
                        }
                    }
                }
            },
            //初始化密码强度检验
            InitPasswordStrength: function(id, StrengthMsgFunc, className) {
                var targetEle = document.getElementById(id);
                var spanId = id + "_passwordstrength";
                if (document.getElementById(spanId) != null)
                    return;


                if (StrengthMsgFunc == null)
                    StrengthMsgFunc = this._strengthMsgFunc;
                var isTest = this.isTextInput(targetEle);
                if (isTest && StrengthMsgFunc) {
                    var spanEle = document.createElement("span");
                    spanEle.id = spanId;
                    spanEle.style.display = "none";
                    spanEle.className = (className != null) ? className : "";
                    if (className == null || className == "") {
                        spanEle.style.cssText = "color:red; font-size:small";
                    }

                    var parentEle = targetEle.parentNode;
                    if (parentEle.lastChild == targetEle)
                        parentEle.appendChild(spanEle);
                    else
                        parentEle.insertBefore(spanEle, targetEle.nextSibling);
                    targetEle.onkeyup = function() {
                        var curValue = targetEle.value;
                        var msg = StrengthMsgFunc(curValue);
                        spanEle.innerHTML = "strength: " + msg;
                        spanEle.style.display = "inline";
                    }
                    targetEle.onblur = function() {
                        spanEle.style.display = "none";
                    }
                    targetEle.onfocus = function() {
                        spanEle.style.display = "inline";
                    }
                }
            },
            //私有的密码强度检测
            _strengthMsgFunc: function(value) {
                var score = -1;
                if (/[0-9]/.test(value))
                    score++;
                if (/[a-z]/.test(value))
                    score++;
                if (/[A-Z]/.test(value))
                    score++;
                if (/[*|_]/.test(value))
                    score++;
                if (value.length > 6)
                    score++;
                if (score <= 0)
                    return '<table style="display:inline"  cellpadding="0" cellspacing="1"><tr><td style="border:none;height:4px; line-height:4px; width:30px; background-color:Gray;">&nbsp;</td><td style=" width:30px; background-color:Gray;"></td><td style=" width:30px; background-color:Gray;"></td></tr></table>弱';
                else if (score == 1)
                    return '<table style="display:inline"  cellpadding="0" cellspacing="1"><tr><td style="border:none;height:4px; line-height:4px; width:30px; background-color:Blue;">&nbsp;</td><td style=" width:30px; background-color:Gray;"></td><td style=" width:30px; background-color:Gray;"></td></tr></table>较好';
                else if (score == 2)
                    return '<table style="display:inline"  cellpadding="0" cellspacing="1"><tr><td style="border:none;height:4px; line-height:4px; width:30px; background-color:yellow;">&nbsp;</td><td style=" width:30px; background-color:yellow;"></td><td style=" width:30px; background-color:Gray;"></td></tr></table>强';
                else
                    return '<table style="display:inline"   cellpadding="0" cellspacing="1"><tr><td style="border:none;height:4px; line-height:4px; width:30px; background-color:Red;">&nbsp;</td><td style=" width:30px; background-color:Red;"></td><td style=" width:30px; background-color:Red;"></td></tr></table>极佳';
            }
        };

        var PageCookieUtil = window.PageCookieUtil || {};
        PageCookieUtil = {
            //JS操作cookies方法!
            //写cookies
            setCookie: function(value, name, key) {
                var Days = 2;
                var exp = new Date();
                exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
                if (key == null || key == "") {
                    document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
                }
                else {
                    var nameValue = this.getCookie(name);
                    if (nameValue == "") {
                        document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
                    }
                    else {
                        var keyValue = this.getCookie(name, key);
                        if (keyValue != "") {
                            nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value));
                            document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/";
                        }
                        else {
                            document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
                        }
                    }
                }
            },
            //读取cookies
            getCookie: function(name, key) {
                var nameValue = "";
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    nameValue = decodeURI(arr[2]);
                }
                if (key != null && key != "") {
                    reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
                    if (arr = nameValue.match(reg)) {
                        return decodeURI(arr[2]);
                    }
                    else return "";
                }
                else {
                    return nameValue;
                }
            },
            //删除cookies
            delCookie: function(name) {
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval = this.getCookie(name);
                if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            }
        }

        var PageAgentUtil = window.PageAgentUtil || {};
        //浏览器相关
        PageAgentUtil = {
            HasInit: false,
            SysAgent: { ie: null, firefox: null, chrome: null, opera: null, safari: null },
            //初始化浏览器类型，私有方法
            _initAgent: function() {
                var ua = navigator.userAgent.toLowerCase();
                if (window.ActiveXObject)
                    SysAgent.ie = ua.match(/msie ([\d.]+)/)[1]
                else if (document.getBoxObjectFor)
                    SysAgent.firefox = ua.match(/firefox\/([\d.]+)/)[1]
                else if (window.MessageEvent && !document.getBoxObjectFor)
                    SysAgent.chrome = ua.match(/chrome\/([\d.]+)/)[1]
                else if (window.opera)
                    SysAgent.opera = ua.match(/opera\/([\d.]+)/)[1]
                else if (window.openDatabase)
                    SysAgent.safari = ua.match(/version\/([\d.]+)/)[1];
            },
            //初始化页面元素的innerText属性，私有方法
            _initInnerTextProperty: function() {
                this._initAgent();
                if (this.SysAgent.ie == null) {
                    //firefox innerText define
                    HTMLElement.prototype.__defineGetter__("innerText", function() {
                        var anyString = "";
                        var childS = this.childNodes;
                        for (var i = 0; i < childS.length; i++) {

                            if (childS[i].nodeType == 1)
                            //anyString += childS[i].tagName=="BR" ? "\n" : childS[i].innerText;
                                anyString += childS[i].innerText;
                            else if (childS[i].nodeType == 3)
                                anyString += childS[i].nodeValue;
                        }
                        return anyString;
                    });

                    HTMLElement.prototype.__defineSetter__("innerText", function(sText) {
                        this.textContent = sText;
                    });
                }
            },
            //初始化浏览器静态类，共有方法
            init: function() {
                this._initInnerTextProperty();
            }
        }
        
        
        
        //PagCommonUtil.InitWaterMarker("testTextArea", "不能为空");
        PageCommonUtil.InitWaterMarkers(["testTextArea", "testTextArea1"], ["不能为空", "不能为空1"]);
        PageCommonUtil.InitPasswordStrength("passwordInput");


        var DragDropUtil = window.DragDropUtil || {};
        DragDropUtil = {
            
        }
    </script>
    <script type ="text/javascript">
        function openDialog() {
            $("#dialog1").dialog({
                bgiframe: true,
                height: 300,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Create user account': function() {
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });
        }
        function testImg() {
            alert(1);
            var imgEle = document.getElementById("testImg1");
            var dd = imgEle.src;
        }

        Object.extend = function(deriveClass, baseClass) {
            for (var property in baseClass) {
                deriveClass[property] = baseClass[property];
            }
            return deriveClass;
        }

        function Person(_id, _name) {
            this.id = _id;
            this.name = _name;
        }

        Person.prototype.getId = function() {
            return this.id;
        }

        function Student(_id, _name) {
            Object.extend(Student, Person);
            return new Person(_id, _name);            
        }
    </script>
    </form>
</body>
</html>
